<template>
    <div class="about-view">
        <el-card class="about-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <el-icon :size="30" color="#409EFF"><InfoFilled /></el-icon>
                    <span class="title">关于系统</span>
                </div>
            </template>

            <el-descriptions :column="2" border>
                <el-descriptions-item label="系统名称">宿舍管理系统</el-descriptions-item>
                <el-descriptions-item label="英文名称">Dormitory Management System</el-descriptions-item>
                <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
                <el-descriptions-item label="发布日期">2025-10-14</el-descriptions-item>
                <el-descriptions-item label="开发框架">Vue 3 + Vite</el-descriptions-item>
                <el-descriptions-item label="UI框架">Element Plus</el-descriptions-item>
                <el-descriptions-item label="状态管理">Pinia</el-descriptions-item>
                <el-descriptions-item label="路由管理">Vue Router</el-descriptions-item>
            </el-descriptions>

            <el-divider />

            <div class="features">
                <h3>功能特性</h3>
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="8" v-for="(feature, index) in features" :key="index">
                        <div class="feature-item">
                            <el-icon :size="40" :color="feature.color">
                                <component :is="feature.icon" />
                            </el-icon>
                            <h4>{{ feature.title }}</h4>
                            <p>{{ feature.desc }}</p>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-divider />

            <div class="tech-stack">
                <h3>技术栈</h3>
                <div class="tech-tags">
                    <el-tag
                        v-for="(tech, index) in techStack"
                        :key="index"
                        :type="tech.type"
                        size="large"
                        effect="plain"
                    >
                        {{ tech.name }}
                    </el-tag>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { InfoFilled, UserFilled, OfficeBuilding, Lock, TrendCharts, Setting, DocumentChecked } from '@element-plus/icons-vue'

const features = ref([
    {
        icon: UserFilled,
        color: '#409EFF',
        title: '学生管理',
        desc: '学生信息的增删改查、批量导入导出等功能'
    },
    {
        icon: OfficeBuilding,
        color: '#67C23A',
        title: '宿舍管理',
        desc: '宿舍信息管理、楼栋管理、床位分配等'
    },
    {
        icon: Lock,
        color: '#E6A23C',
        title: '权限管理',
        desc: '用户权限控制、角色管理、登录认证等'
    },
    {
        icon: TrendCharts,
        color: '#F56C6C',
        title: '数据统计',
        desc: '入住率统计、费用统计、数据可视化分析'
    },
    {
        icon: Setting,
        color: '#909399',
        title: '系统设置',
        desc: '系统配置、参数设置、数据备份等功能'
    },
    {
        icon: DocumentChecked,
        color: '#00BFFF',
        title: '日志管理',
        desc: '操作日志记录、系统日志查询、审计追踪'
    }
])

const techStack = ref([
    { name: 'Vue 3.5', type: 'success' },
    { name: 'Vite 7.1', type: 'warning' },
    { name: 'Element Plus 2.11', type: 'primary' },
    { name: 'Pinia 3.0', type: 'success' },
    { name: 'Vue Router 4.5', type: 'info' },
    { name: 'Axios 1.12', type: 'danger' },
    { name: 'SCSS', type: 'warning' },
    { name: 'ES6+', type: 'primary' }
])
</script>

<style lang="scss" scoped>
.about-view {
    max-width: 1200px;
    margin: 0 auto;

    .about-card {
        .card-header {
            display: flex;
            align-items: center;
            gap: 15px;

            .title {
                font-size: 20px;
                font-weight: 600;
                color: #333;
            }
        }

        .features {
            margin-top: 20px;

            h3 {
                font-size: 18px;
                font-weight: 600;
                color: #333;
                margin-bottom: 20px;
            }

            .feature-item {
                text-align: center;
                padding: 20px;
                border-radius: 8px;
                transition: all 0.3s;
                margin-bottom: 20px;

                &:hover {
                    background-color: #f5f7fa;
                    transform: translateY(-5px);
                }

                h4 {
                    font-size: 16px;
                    color: #333;
                    margin: 15px 0 10px;
                }

                p {
                    font-size: 14px;
                    color: #666;
                    line-height: 1.6;
                }
            }
        }

        .tech-stack {
            margin-top: 20px;

            h3 {
                font-size: 18px;
                font-weight: 600;
                color: #333;
                margin-bottom: 20px;
            }

            .tech-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 15px;

                .el-tag {
                    font-size: 14px;
                    padding: 8px 16px;
                }
            }
        }
    }
}
</style>
